<template>
  <div class="cart_part_page" v-show="card_flag">
    <div class="cart_part_close" @click="close_item">x</div>
    <div class="cart_part_number">
      {{ store.state.deck[store.state.index] }}
    </div>
    <el-button @click="add_item">+</el-button>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits } from "vue";
import { useStore } from "vuex";
import { key } from "../store";
const store = useStore(key);
// card_flag  控制是否显示组件    index 牌的下标
const props = defineProps({
  card_flag: {
    type: Boolean,
  },
});
// 关闭组件
const emit = defineEmits(["click_close"]);
const close_item = () => {
  emit("click_close", false);
};
// 增加牌的点数
const add_item = () => {
  store.commit("ADD_DECK_ITEM");
};
</script>
<style scoped>
.cart_part_page {
  width: 400px;
  height: 300px;
  border: 1px solid #000;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -150px;
  background-color: #fff;
  border-radius: 20px;
}
.cart_part_close {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 30px;
}
.cart_part_number {
  margin: 80px 0;
  font-size: 40px;
}
</style>
